<template>
  <div id="app">
    <div class="stopEditor" @click.once="stop()">跳过</div>
    <StyleEditor ref="styleEditor" :code="currentStyle"></StyleEditor>
    <ResumeEditor ref="resumeEditor" :markdown="currentMarkdown" :enableHtml="enableHtml"></ResumeEditor>
  </div>
</template>

<script>
  import StyleEditor from './components/StyleEditor'
  import ResumeEditor from './components/ResumeEditor'
  import './assets/reset.css'

  export default {
    name: 'app',
    components: {
      StyleEditor,
      ResumeEditor
    },
    data() {
      return {
        interval: 20,
        currentStyle: '',
        enableHtml: false,
        fullStyle: [
          `/*
 * Hi 你好，我是曹关菊，是一大傻子
 * 感谢查看我的简历 Ｏ(≧▽≦)Ｏ
 * 简历构建中
 * ··· 3 ···
 * ··· 2 ···
 * ··· 1 ···
*/

/* 首先给所有元素加上过渡效果 */
* {
  transition: all .3s;
}

/* 白色背景有点扎眼，我们来点背景色 */
html {
  color: rgb(53,53,53);
  background: rgb(232,233,237);
}

/* 文字离边框太近了 */
.styleEditor {
  margin: 1em;
  padding: 1em;
  width: 30vw;
  height: 95vh;
  background: rgb(242,242,242);
  border-radius:3px;
  overflow: auto;
}

/* 代码高亮才能展现美 */
.token.selector{color: rgb(133,153,0 );}
.token.property{color: rgb(187,137,0 );}
.token.punctuation{color: black;}
.token.function{color :rgb(42,161,152);}

/* 加点 3D 效果？ */
html{
  perspective: 1000px;
}
.styleEditor {
  position: fixed; left: 0; top: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: rotateY(10deg)
                     translateZ(-100px);
          transform: rotateY(10deg)
                     translateZ(-100px);
}

/* 呃呃呃...好像3D的忒丑，那我还是去掉吧！*/
.styleEditor{
  transform:none;
}

/* 看了这么久您可能着急了
 * 右上角有跳过按钮，可以直接看最后结果
 */

/* 接下来我得做一个编辑器 */
.resumeEditor{
  font-family: "Georgia", "Xin Gothic",
        "Hiragino Sans GB", "Droid Sans Fallback",
        "Microsoft YaHei", sans-serif;
  position: fixed;
  right: 0; top: 0;
  padding: 1em;  margin: 1em;
  width: 65vw; height: 95vh;
  border-radius: 5px;
  background: rgb(211,217,227);
  color: #222;
  overflow: auto;
}

/* OK，那么现在开始写简历 */
`,
          `
/* 这个简历有些丑...
 * emm，这是 Markdown 格式的
 * 我需要变成更友好的样式
 * 那么，用开源工具翻译成 HTML 就行了
 */
`,
          `
/* 再对 HTML 加点样式 */
.resumeEditor{
  padding: 2em;
}
.resumeEditor p{
  margin: 10px 0;
  color: #555;
}
.resumeEditor h1{
  font-size: 1.6rem;
  line-height: 28px;
  margin: 52px 0 15px 0;
  padding-bottom: 7px;
  color: #000;
}
.resumeEditor h2{
  font-size: 1.3rem;
  line-height: 23px;
  margin: 30px 0 13px 0;
  padding-bottom: 7px;
  color: #333;
}
.resumeEditor h3{
  font-size: 1.2rem;
  line-height: 18px;
  margin: 20px 0 2px;
  padding-bottom: 7px;
  color: #333;
}
.resumeEditor ul{
  display: block;
  list-style-type: disc;
  padding-left: 17px;
  margin: 6px 0 10px;
  color: #555;
}
.resumeEditor ul li{
  position: relative;
  left: 15px;
}
.resumeEditor blockquote {
  border-left: 4px solid #aba8a8;
  padding: 0 15px;
}
.resumeEditor blockquote>:last-child {
  margin-bottom: 15px;
}
.resumeEditor blockquote>:first-child {
  margin-top: 15px;
}
`],
        currentMarkdown: '',
        fullMarkdown: `
## 个人信息
- 曹关菊/女/1997
- 本科/河北工程大学
- 我也不知道
- 手机：18076555663
- 2464608695

## 技能证书

-1.CET-6，优秀的听说写能力
-2.计算机二级，熟悉计算机各项操作
-3.高级营销员，国家职业资格四级

## 工作经历

### 万乐福购物中心 （2015/07 -- 2015/08）

#### 服装导购员
> 1.配合柜组主任，每日进行货物盘点 
> 2.利用自身的交际优势，向顾客推荐衣服 
> 3.针对销售情况，不定期的制定出服装销售活动

### 北京龙宸咨询有限公司 （2017/01 -- 2018/03）

#### 行政实习生
> 1.参与并完成了一个独立模块课程编写，包括整的个模块的设计、人员任务分配、工作计划制定等工作，该项目属于新媒体传媒其主要方向为青少年的十商与青少年家庭领导力！写作能力和工作能力受到主管与经理一致认可！
> 2.每个月接受公司的领导力培训
> 3.利用Arctime软件进行简单的视频编辑，给视频配字幕，加水印！ 
> 4.为公司的线下活动，如夏令营，进行活动策划！ 
> 5.在所有课程内容完成后，由我负责进行最后的内容评审，并统一文风和话风！

## 获奖情况
- 1.河北工程大学三好学生 校级 2015年
- 2.友谊辩论赛优秀辩手称号 校级 2015 年
- 3.河北工程大学校学生会优秀干事称号 校级 2015年 
- 4.河北工程大学三好学生 校级 2016年 
- 5.河北工程大学优秀毕业生称号 校级 2017 年
- 6.河北工程大学资源学院三好学生 院级 2015年 
- 7.宣信杯辩论赛一等奖 院级 2014 年

## 自我评价
- 1.性格活泼外向，喜欢与人交流！ 
- 2.做事认真，追求尽善尽美！ 
- 3.喜欢爬山、跑步、篮球等运动，也因此骨子里有一股韧劲，遇到困难不轻易放弃！
- 4.喜欢读书，文笔较好！
- 5.集体意识和纪律性抗压与抗挫能力组织与协调能力书面表达能力人际沟通能力

`
      }
    },
    created() {
      this.makeResume()
    },

    methods: {
      makeResume: async function () {
        await this.progressivelyShowStyle(0);
        await this.progressivelyShowResume();
        await this.progressivelyShowStyle(1);
        await this.showHtml();
        await this.progressivelyShowStyle(2)
      },
      showHtml: function () {
        return new Promise((resolve, reject) => {
          this.enableHtml = true;
          resolve()
        })
      },
      progressivelyShowStyle(n) {
        return new Promise((resolve, reject) => {
          let interval = this.interval;
          let showStyle = (async function () {
            let style = this.fullStyle[n];
            if (!style) {
              return
            }
            // 计算前 n 个 style 的字符总数
            let length = this.fullStyle.filter((_, index) => index <= n).map((item) => item.length).reduce((p, c) => p + c, 0)
            let prefixLength = length - style.length;
            if (this.currentStyle.length < length) {
              let l = this.currentStyle.length - prefixLength;
              let char = style.substring(l, l + 1) || ' ';
              this.currentStyle += char;
              if (style.substring(l - 1, l) === '\n' && this.$refs.styleEditor) {
                this.$nextTick(() => {
                  this.$refs.styleEditor.goBottom();
                })
              }
              setTimeout(showStyle, interval)
            } else {
              resolve()
            }
          }).bind(this);
          showStyle()
        })
      },
      progressivelyShowResume() {
        return new Promise((resolve, reject) => {
          let length = this.fullMarkdown.length;
          let interval = 5;
          let showResume = () => {
            if (this.currentMarkdown.length < length) {
              this.currentMarkdown = this.fullMarkdown.substring(0, this.currentMarkdown.length + 1);
              let lastChar = this.currentMarkdown[this.currentMarkdown.length - 1];
              let prevChar = this.currentMarkdown[this.currentMarkdown.length - 2];
              if (prevChar === '\n' && this.$refs.resumeEditor) {
                this.$nextTick(() => this.$refs.resumeEditor.goBottom())
              }
              setTimeout(showResume, interval)
            } else {
              resolve()
            }
          };
          showResume()
        })
      },
      stop() {
        this.currentMarkdown = this.fullMarkdown;
        this.currentStyle = this.fullStyle;
      }
    }
  }

</script>

<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    min-height: 100vh;
  }

  * {
    box-sizing: border-box;
  }

  .stopEditor {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 50px;
    top: 35px;
    z-index: 1040;
    cursor: pointer;
    background-color: rgba(107, 138, 167, 1);
    border-radius: 50%;
    font-size:20px;
    text-align:center;
    line-height:50px;
    color:#000;
  }
</style>
